<template>
	<div class="g-pt g-pb">
		<HeaderTop :title="title">
			<span class="header-icon" slot="left">
				<i class="iconfont icon-icon-search"></i>
			</span>
			<span class="header-link" slot="right">
				<a href="#" class="link-item">登录</a>
				<span class="pg">/</span>
				<a href="#" class="link-item">注册</a>
			</span>
		</HeaderTop>
		<!-- 轮播图 -->
		<div class="swiper-container" v-if="categorys.length">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="item,index in this.categorys" :key="index">
					<a href="#" class="item">
						<div><img v-lazy="baseImgURL + item.image_url" alt=""></div>
						<p>{{item.title}}</p>
					</a>
				</div>

			</div>
			<div class="swiper-pagination"></div>
		</div>
		<img src="../../assets/images/msite_back.svg" v-else>
		<div class="container">
			<div class="header">
				<div class="icon">
					<span></span>
					<span></span>
					<span></span>
				</div>
				附近商家
			</div>
			<!-- 商家列表 -->
			<ShopList :shops='shops'></ShopList>
		</div>
	</div>
</template>

<script>
	import Swiper from 'swiper'
	import 'swiper/dist/css/swiper.min.css'
	import ShopList from '../../components/ShopList/ShopList.vue'

	export default {
		data() {
			return {
				// 标题
				title: '',
				// 纬度
				latitude: 40.10038,
				// 经度
				longitude: 116.36867,
				// 地址对象
				address: {},
				//商品分类数组
				categorys: [],
				// 商品分类一维数组转换过来的二维数组
				barAry: [],
				// 食品分类基础路径
				baseImgURL: 'http://fuss10.elemecdn.com',
				// 附近商家
				shops: []
			}
		},
		created() {
			// 获取地址
			this.getAddress()
			// 获取商家分类列表
			this.getCategorys()
			// 获取商家列表
			this.getShops()
		},
		mounted() {
			
		},
		methods: {
			// 轮播图
			doSwiper() {
				// 轮播图挂载
				new Swiper('.swiper-container', {
					loop: false,
					slidesPerView: 4,
					spaceBetween: 15,
					slidesPerGroup: 4,
					slidesPerColumn: 2,
					slidesPerColumnFill: 'row',
					pagination: {
						el: '.swiper-pagination',
					},
				})
			},
			// 获取地址
			async getAddress() {
				const geohash = this.latitude + ',' + this.longitude
				const {
					data: res
				} = await this.$http.get(`/position/${geohash}`)
				if (res.code !== 0) {
					return console.log('获取地址失败！')
				}
				console.log("地址信息：",res)
				this.address = res.data
				this.title = res.data.name
			},
			// 获取食品分类列表
			async getCategorys() {
				const {	data: res } = await this.$http.get('/index_category')
				if (res.code !== 0) {
					return console.log('获取食品分类列表失败！')
				}
				
				this.categorys = res.data
				console.log("食品分类：", this.categorys)
				
				// // 将分类列表转换为二维数组
				// // 数组容器
				// let minArr = []
				// this.categorys.forEach(item => {
				// 	// 如果为8个,将容器数组清空
				// 	if(minArr.length === 8) {
				// 		minArr = []
				// 	}
					
				// 	// 数组清空说明长度到了,push到this.barAry
				// 	if(minArr.length === 0) {
				// 		this.barAry.push(minArr)
				// 	}

				// 	// push到容器数组里面
				// 	minArr.push(item)
				// })
			},
			// 获取商家列表
			async getShops() {
				// 发起请求
				const { data : res} = await	this.$http.get('/shops', {params: {
					latitude: this.latitude,
					longitude: this.longitude
				}})
				// 判断状态码
				if(res.code !== 0 ) return console.log('获取附近商家列表失败！')
				
				this.shops = res.data
				console.log("附近商家列表", res)
				
			}
			
		},
		components: {
			ShopList
		},
		computed: {
			
		},
		watch:{
			categorys: function (value) {
				// $nextTick  界面更新就执行的回调函数（此条数据要写在更新数据之后）
				// 数据获取完毕再挂载轮播图
				this.$nextTick(() => {
					this.doSwiper()
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.swiper-container {
		border-bottom: 1px solid rgba(218, 218, 218, 0.5);
		margin-bottom: 10px;
		padding: 30px 0;
		background: #fff;
	}

	.swiper-slide {
		.item {
			display: block;
			text-align: center;

			div>img {
				width: 80%;
			}

			p {
				font-size: 12px;
				color: #333;
			}
		}
	}

	.container {
		border-top: 1px solid rgba(218, 218, 218, 0.5);
		background: #fff;

		.header {
			.icon {
				display: inline-block;
				width: 15px;
				height: 15px;
				vertical-align: -2px;
				position: relative;

				span {
					position: absolute;
					width: 100%;
					height: 1px;
					display: block;
					background: #999;

					&:nth-child(2) {
						top: 50%;
						margin-top: -1px;
						left: 0;
					}

					&:nth-child(3) {
						left: 0;
						bottom: 0;
					}
				}
			}

			padding: 10px;
			font-size: 15px;
			color: #999;
			line-height: 20px;
		}
	}
</style>
